<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html,body{  
            margin: 0;  
            padding: 0;  
        }  
        #wrap{  
            width: 100%;  
            overflow: hidden;  
            background: #ccc;  
        }  
        #main{  
            width: 100%;  
            background: #ccc;  
            position: relative;  
        }  
        .page{  
            width:100%;  
            margin:0;  
        }  
        #page1{  
            background:#E4E6CE;  
        }  
        #page2{  
            background:#6CE26C;  
        }  
        #page3{  
            background:#BF4938;  
        }  
        #page4{  
            background:#2932E1;  
        }  
    </style>
</head>
<body>
    <div id="wrap">  
        <div id="main">  
            <div id="page1" class="page"></div>  
            <div id="page2" class="page"></div>  
            <div id="page3" class="page"></div>  
            <div id="page4" class="page"></div>  
        </div>      
    </div>
    <script>
        var pages = document.getElementsByClassName("page");  
        var wrap = document.getElementById("wrap");  
        var len = document.documentElement.clientHeight;  
        var main = document.getElementById("main");  
        wrap.style.height = len + "px";  
        for(var i=0; i<pages.length; i++){  
            pages[i].style.height = len + "px";  
        }  
        if(navigator.userAgent.toLowerCase().indexOf("firefox") != -1){  
            document.addEventListener("DOMMouseScroll",scrollFun);  
        }else if(document.addEventListener){  
            document.addEventListener("mousewheel",scrollFun,false);  
        }else if(document.attachEvent){  
            document.attachEvent("onmousewheel",scrollFun);  
        }else{  
            document.onmousewheel = scrollFun;  
        }  
        var startTime = 0;  
        var endTime = 0;  
        var now = 0;  
        function scrollFun(e){  
            startTime = new Date().getTime();  
            var event = e || window.event;  
            var dir = event.detail || -event.wheelDelta;  
            if(startTime - endTime > 1000){  
                if(dir>0 && now > -3*len){  
                    now -= len;   
                    // main.style.top = now +"px";  
                    transformScroll(false)
                    endTime = new Date().getTime();  
                }else if(dir<0 && now < 0){  
                    now += len;  
                    // main.style.top = now +"px";  
                    transformScroll(true)
                    endTime = new Date().getTime();  
                }  
            }else{  
                event.preventDefault();      
            }  
        }
        let current = main.style.top.slice(0,-2)
        function transformScroll (bool) {
            setTimeout(() => {
                if (current !== now) {
                    if (bool) {
                        current += 50
                        current > now ? current = now : ''
                    } else {
                        current -= 50
                        current < now ? current = now : ''
                    }
                    main.style.top = current + 'px'
                    transformScroll(bool)
                }
                
            }, 20);
        }
    </script>  
</body>
</html>